<template>
	<div class="heads">
		<div class="big-center">
			<div class="center zuoyou">
				<!-- <div class = "cont left" style="border:1px solid red;height:140px;width:140px">
          <img class = "logos" src = "" />
        </div> -->
				<!-- <div class="cont conter shangxia">
					<div class="names zuida" @click="goHome()">SSXAN</div>
					<div class="weixin"></div>
					<div class="weixin">{{ $t('foots.Address') }}</div>
					<div class="weixin">wannabeshop@gmail.com</div>
				</div> -->
				<div class="cont conter shangxia">
					<div class="names"> {{ $t('foots.AboutUs') }}</div>
					<div class="weixin" @click="navigateToRoute('101')">{{ $t('foots.enterpriseProfile') }}</div>
					<div class="weixin" @click="navigateToRoute('102')">{{ $t('foots.corporateCulture') }}</div>
					<div class="weixin" @click="navigateToRoute('103')">{{ $t('foots.BrandCooperation') }}</div>
					<div class="weixin" @click="navigateToRoute('104')">{{ $t('foots.investment') }}</div>
					<div class="weixin" @click="navigateToRoute('105')">{{ $t('foots.recruitment') }}</div>
				</div>
				<div class="cont conter shangxia">
					<div class="names"> {{ $t('foots.shoppingGuide') }}</div>
					<div class="weixin" @click="navigateToRoute('201')">{{ $t('foots.memberEnrollment') }}</div>
					<div class="weixin" @click="navigateToRoute('202')">{{ $t('foots.ShoppingProcess') }}</div>
					<div class="weixin" @click="navigateToRoute('203')">{{ $t('foots.CustomizedGoods') }}</div>
				</div>
				<div class="cont conter shangxia">
					<div class="names"> {{ $t('foots.modeOfPayment') }}</div>
					<div class="weixin" @click="navigateToRoute('301')">{{ $t('foots.OnlinePayment') }}</div>
					<div class="weixin" @click="navigateToRoute('302')">{{ $t('foots.bankTransfer') }}</div>
					<div class="weixin" @click="navigateToRoute('303')">{{ $t('foots.CompanyTransfer') }}</div>
				</div>
				<div class="cont conter shangxia">
					<div class="names"> {{ $t('foots.Distribution') }}</div>
					<div class="weixin" @click="navigateToRoute('401')">{{ $t('foots.PickItUpAtHome') }}</div>
					<div class="weixin" @click="navigateToRoute('402')">{{ $t('foots.logistics') }}</div>
					<div class="weixin" @click="navigateToRoute('403')">{{ $t('foots.LogisticsQuery') }}</div>
					<div class="weixin" @click="navigateToRoute('404')">{{ $t('foots.standards') }}</div>
				</div>
				<div class="cont conter shangxia">
					<!-- <div class="names" @click="goChat()">{{ $t('foots.contactUs') }}</div>
					<div class="weixin"></div>
					<div class="weixin">{{ $t('foots.LoremIpsum') }}</div>
					<div class="weixin liangxiaohe">
						<div><el-input :placeholder="$t('foots.MailAddress')" v-model="input" clearable>
							</el-input></div>
						<div>{{ $t('foots.Send') }}</div>
					</div> -->
					<div class="qrCodeBox">
						<img class="qrcodeImg" :src="QRcode" alt="">
					</div>
				</div>
				<!-- <div class = "cont right">
          <div class = "xcx">
            <img class = "erweima" :src = "QRcode"/>
            <div class = "saoma">扫描二维码 <br/>获取全网优质商品</div>
          </div>
         <div class = "xcx">
            <img class = "erweima" :src = "downcode"/>
            <div class = "saoma">扫描二维码 <br/>下载自营商城APP</div>
          </div>

        </div> -->
			</div>
		</div>
		<section class="copyright-section">
			<p>Copyright &copy; XX科技有限公司. 版权所有.</p>
			<!-- <a href = "http://www.beian.gov.cn/">
			<p>{{beianhao}}</p>
		</a> -->
		</section>
	</div>
</template>

<script>
export default {
	name: 'Foots',
	data() {
		return {
			QRcode: '../assets/img/1728385530049.jpg',
			downcode: '../assets/foot/app.png',
			company: 'xx网络科技有限公司',
			address: 'xx',
			weixin: 'maxdlln',
			beianhao: '',
			input: '',
		}
	},
	created() {
		this.getCode()
	},
	computed: {
		userId() {
			if (this.$cookie.get('uuid')) {
				return this.$cookie.get('userId')
			} else {
				this.$store.commit('updateUserId', '')
				this.$store.commit('updateRelationId', '')
				this.$cookie.set('uuid', '')
				this.$cookie.set('userId', '')
				this.$cookie.set('relationId', '')
				this.$cookie.set('image_url', '')
				this.$cookie.set('nickName', '')
				this.$cookie.set('phone', '')
			}

			// return this.$store.state.userId

		},
		// productList (newLength, oldLength) {
		// 	// 当购物车商品长度发生变化时，会进入这个函数
		// 	console.log(`购物车商品数量basd为：${oldLength}`);
		// 	console.log(`购物车商品数量变为：${newLength}`);
		// 	// 这里可以执行其他逻辑，比如更新购物车总金额等
		// }
	},
	methods: {
		// 跳转到帮助中心
		navigateToRoute(num) {
			let title = ''
			if (num == '101') {
				title = '企业简介'
			} else if (num == '102') {
				title = '企业文化'
			} else if (num == '103') {
				title = '品牌合作'
			} else if (num == '104') {
				title = '项目招商'
			} else if (num == '105') {
				title = '人才招聘'
			} else if (num == '201') {
				title = '会员注册'
			} else if (num == '202') {
				title = '购物流程'
			} else if (num == '203') {
				title = '定制商品'
			} else if (num == '301') {
				title = '在线支付'
			} else if (num == '302') {
				title = '银行汇款'
			} else if (num == '303') {
				title = '公司转账'
			} else if (num == '401') {
				title = '上门自提'
			} else if (num == '402') {
				title = '物流配送'
			} else if (num == '403') {
				title = '物流查询'
			} else if (num == '404') {
				title = '收费标准'
			} else {
				title = ''
			}
			if (title != '') {
				this.$router.push({ path: '/helpCenter', query: { title: title } });
			}
			// this.$router.push({ path: '/helpCenter', query: { title: title } });
		},
		goAbute(url) {
			console.log('url', url)
			uni.navigateTo({
				url: url
			})
		},
		getCode() {
			this.$http({
				url: this.$http.adornUrl('/common/type/280'),	//小程序二维码
				method: 'get',
			}).then(({ data }) => {
				window.localStorage.setItem("QRcode", data.data.value);
				this.QRcode = data.data.value
			})
			this.$http({
				url: this.$http.adornUrl('/common/type/281'),	//app下载地址
				method: 'get',
			}).then(({ data }) => {
				window.localStorage.setItem("downcode", data.data.value);
				this.downcode = data.data.value
			})
			this.$http({
				url: this.$http.adornUrl('/common/type/282'),	//公司名称
				method: 'get',
			}).then(({ data }) => {
				this.company = data.data.value
			})
			this.$http({
				url: this.$http.adornUrl('/common/type/283'),	//公司地址
				method: 'get',
			}).then(({ data }) => {
				this.address = data.data.value
			})

			this.$http({
				url: this.$http.adornUrl('/common/type/284'),	//备案号
				method: 'get',
			}).then(({ data }) => {
				this.beianhao = data.data.value
			})

			this.$http({
				url: this.$http.adornUrl('/common/type/44'),	//微信号
				method: 'get',
			}).then(({ data }) => {
				this.weixin = data.data.value
			})
		},
		goChat() {
			if (this.userId) {
				this.$http({
					url: this.$http.adornUrl('/chat/save'),
					method: 'post',
					data: this.$http.adornData({
						storeHead: "地摊兄自营店铺",
						storeId: "0",
						storeName: "",
						userId: this.$cookie.get('userId'),
						userName: this.$cookie.get('nickName'),
					})
				}).then(({ data }) => {
					let returnData = data.data;
					this.$router.push({
						path: '/vueMchat?chatId=' + returnData.chatId
					})
				})
			} else {
				this.$router.push({
					path: '/login'
				})
			}
		},
		goHome() {
			if (this.$route.path == '/') {

			} else {
				this.$router.push({
					path: '/'
				})
			}

		},
	}
}
</script>
<style scoped="scoped" lang="less">
.big-center {
	// width: 1440px;
	width: 100%;
	// height: 237px;
	line-height: 24px;
	color: #fff;
	font-size: 14px;
	background: #26272A;
	margin: 0 auto;
}

.center {
	width: 80%;
	max-width: 1200px;
	margin: 0 auto;
	padding-top: 58px;
	padding-bottom: 20px;
	box-sizing: border-box;
}

.cont {
	display: inline-block;
	font-size: 14px;
}

.left {
	width: 25%;
	text-align: left;
}

.left img {
	width: 82%;
	position: relative;
	bottom: 30px;
}

.conter {
	/* text-align: left; */
	// height: 121px;
	/* width: 30%; */
	/* line-height: 40px; */
}

.zuoyou {
	display: flex;
}

.shangxia {
	width: 20%;
	display: flex;
	flex-direction: column;
	// justify-content: space-between;
}

.names {
	font-size: 20px;
	font-weight: 900;
}

.names:hover {
	cursor: pointer;
}

.zuida {
	font-size: 24px;
	font-weight: 900;
}

.weixin {
	// width: 255px;
	padding: 5px 0;
	/* line-height: 35px; */
	box-sizing: border-box;
	font-size: 14px;
	color: #cccccc;
	text-decoration: underline;
}

.weixin:hover {
	cursor: pointer;
	color: #EA7408;
}

.liangxiaohe {
	position: relative;
	height: 38px !important;
	padding: 0;
	/* margin: px 0; */
}

.qrCodeBox {
	width: 100%;
	padding: 40px;
	box-sizing: border-box;
}

.qrcodeImg {
	width: 100%;
}

.liangxiaohe div:nth-child(2) {
	background: #000;
	width: 133px;
	height: 38px;
	border-radius: 38px;
	position: absolute;
	z-index: 0;
	right: -54px;
	top: 0px;
	color: #fff;
	text-align: center;
	line-height: 38px;
	/* float: left; */
}

.liangxiaohe div:nth-child(1) {
	background: #fff;
	width: 207px;
	height: 38px;
	border-radius: 38px;
	z-index: 2311;
	top: 0px;
	position: absolute;
	color: #979797;
	text-align: center;
	line-height: 38px;
	overflow: hidden;
}

/deep/.liangxiaohe div:nth-child(1) .el-input {
	width: 100%;
	height: 100%;
	padding: 0;
	position: unset;
}

.right {
	width: 44%;
	padding-top: 5%;


}

.right .xcx {
	display: inline-block;
	text-align: center;
	width: 40%;
	margin-left: 9%;
	/* padding: 2% 10%; */
}

.right .xcx img {
	width: 40%;

}

.saoma {
	text-align: center;
}

.copyright-section {
	background: #fff;
}

.copyright-section p {
	color: #999999;
}

.copyright-section p span {
	color: #cccccc;
}

.copyright-section {
	padding: 30px 0;
	text-align: center;
	background: #000000;
}

.copyright-section p {
	margin-bottom: 0;
	font-size: 10px;
	text-transform: uppercase;
	color: #999;
	font-family: 'Montserrat', sans-serif;
}

.copyright-section p span {
	color: #ccc;
}
</style>
